<template>
  <div id="roleManage" class="rolerManagement">

   <!-- <div class="crumbs">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item><i class="el-icon-lx-cascades"></i> 系统设置</el-breadcrumb-item>
            <el-breadcrumb-item>角色管理</el-breadcrumb-item>
        </el-breadcrumb>
  </div> -->

   <div class="container">

      <div class="handle-box">
          <el-button @click="dialogVisible = true" type="primary" icon="el-icon-plus" size="mini"> 新增</el-button>
      </div>

      <el-table 
       :data="tableData" 
       tooltip-effect="dark"
       border
       class="table"
       ref="multipleTable"
       header-cell-class-name="table-header">
        <el-table-column type="index" width="50" align="center">
        </el-table-column>
        <el-table-column label="名称" prop="title" align="center">
        </el-table-column>
        <el-table-column prop="description" label="描述" align="center">
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
             <el-button type="success" size="mini" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
             <el-button type="danger" size="mini" icon="el-icon-delete" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
             <!--  <el-button type="text" icon="el-icon-edit"  @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button type="text"  icon="el-icon-delete" class="red" @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
          </template>
        </el-table-column>
      </el-table>

    </div>

    <!-- 弹框 添加 -->
    <!-- <el-dialog title="添加" :visible.sync="dialogVisible" width="30%" :before-close="handleClose"> -->
    <el-dialog title="添加" :visible.sync="dialogVisible" width="30%">
      <div>
        <el-form ref="form" :rules="rules" :model="form" label-width="80px">
          <el-form-item label="名称" prop="title">
            <el-input v-model="form.title"></el-input>
          </el-form-item>
          <el-form-item label="描述" prop="description">
            <el-input v-model="form.description"></el-input>
          </el-form-item>
          <el-form-item label="菜单配置">
            <el-tree ref="tree" :data="treeDataList" show-checkbox node-key="id" :props="defaultProps">
            </el-tree>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('form')">立即创建</el-button>
            <el-button @click="dialogVisible = false">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>

    <!-- 弹框 编辑用户 -->
    <!-- <el-dialog title="编辑" :visible.sync="editDialogVisible" width="30%" :before-close="handleClose"> -->
    <el-dialog title="编辑" :visible.sync="editDialogVisible" width="30%">
      <div>
        <el-form ref="editForm" id="editF" :rules="rules" :model="editForm" label-width="80px">
          <el-form-item label="名称" prop="title">
            <el-input v-model="editForm.title"></el-input>
          </el-form-item>
          <el-form-item label="描述" prop="description">
            <el-input v-model="editForm.description"></el-input>
          </el-form-item>
          <el-form-item label="菜单配置">
            <el-tree :data="treeDataList" ref="tree" show-checkbox node-key="id" :default-checked-keys="checkedTreeList"
              :props="defaultProps">
            </el-tree>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="updateForm('editForm')">立即更新</el-button>
            <el-button @click="editDialogVisible = false">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>

  </div>
</template>
<script>

  export default {
    name: 'rolerManagement',
    data() {
      return {
        dialogVisible: false,
        editDialogVisible: false,

        defaultProps: {
          children: 'children',
          label: 'title',
        },
        form: {
          title: '',
          description: '',
        },
        editForm: {
          title: '',
          description: '',
        },
        treeDataList: [],
        checkedTreeList: [],
        roleIdSelected: '',
        rules: {
          title: [{
              required: true,
              message: '请输入名称',
              trigger: 'blur'
            }
            // {
            //   min: 1,
            //   max: 5,
            //   message: '长度在 1 到 5 个字符',
            //   trigger: 'blur'
            // }
          ],
        },
        tableData: [{
          title: '',
          description: '',
        }],
      }
    },
    methods: {
      getTableData() {
         this.$axios.get('/role/getRoleList')
        .then(response => {
          this.tableData = response.data;
        }).catch(error => {

        })
      },
      handleEdit(index, row) {
        this.editDialogVisible = true
        this.checkedTreeList = [];
         this.$axios.get('/role/editRoleResource',{
          params:{
                  roleId: row.id
              }
          }).then(response => {
          let res = response.data;
          this.editForm = res.sysAdminRole
          this.treeDataList = res.roleResourceTypeDtoList
          let list = res.roleResourceTypeDtoList
          // 循环遍历获得被选中的节点
          for (let i = 0; i < list.length; i++) {
            if (list[i].children.length > 0) {
              for (let j = 0; j < list[i].children.length; j++) {
                if (list[i].children[j].checked) {
                  this.checkedTreeList.push(list[i].children[j].id)
                }
              }
            } else {
              if (list[i].checked) {
                this.checkedTreeList.push(list[i].id)
              }
            }
          }
          document.getElementById('editF').setAttribute('rowId',row.id);
     
        }).catch(error => {
          console.log(error);
        })
      },
      handleDelete(index, row) {
        this.$confirm('确认删除此条数据吗？')
          .then(_ => {
             this.$axios.get('/role/deleteRole',{
                params:{
                         roleId: row.id
                    }
                }).then(response => {
              this.getTableData();
            }).catch(error => {
              console.log(error);
            })
          }).catch(_ => {});
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      // 添加提交
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let title = this.form.title
            let resourceIds = [] //子节点
            let description = this.form.description
            let resourceTypeIds = [] //根节点
            var treeData = this.$refs.tree.getCheckedNodes()

            for (let i = 0; i < treeData.length; i++) {
              if (treeData[i].children) {
                resourceTypeIds.push(treeData[i].id)
              } else {
                resourceIds.push(treeData[i].id)
              }
            }
            var cArr = resourceTypeIds.concat(this.$refs.tree.getHalfCheckedKeys())
            let obj = {
              title: title,
              resourceIds: resourceIds.join(','),
              description: description,
              resourceTypeIds: cArr.join(',')
            }
             this.$axios.post('/role/saveRoleResource', obj).then(response => {
              this.getTableData();
              this.dialogVisible = false;
              this.form={}
              //   获取岗位
              this.$axios.get('/role/getResourceList').then(response => {
                this.treeDataList = response.data
              }).catch(error => {

              })
            }).catch(error => {
              console.log(error);
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      // 编辑提交
      updateForm(formName) {
        let resourceTypeIds = []
        let resourceIds = []
        var treeData = this.$refs.tree.getCheckedNodes()

        for (let i = 0; i < treeData.length; i++) {
          if (treeData[i].children) {
            resourceTypeIds.push(treeData[i].id)
          } else {
            resourceIds.push(treeData[i].id)
          }
        }
        var cArr = resourceTypeIds.concat(this.$refs.tree.getHalfCheckedKeys())
        let obj = {
          title: this.editForm.title,
          resourceIds: resourceIds.join(','),
          description: this.editForm.description,
          resourceTypeIds: cArr.join(','),
          roleId:document.getElementById('editF').getAttribute('rowId')
        }
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$axios.post('/role/updateRoleResource', obj).then(response => {
              this.editDialogVisible = false;
              this.getTableData();
            }).catch(error => {
              console.log(error);
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
    },
    watch: {
      roleId(val, oldVal) {}
    },
    mounted() {
      this.getTableData();

      //   获取岗位
      this.$axios.get('/role/getResourceList').then(response => {
        this.treeDataList = response.data
      }).catch(error => {

      })
    }
  }

</script>

<style lang="scss" scoped>
.handle-box {
    margin-bottom: 10px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.green{
  color:green
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}

</style>